<template>
  <div class="search_box">
    <el-form :inline="true" :model="formData" class="search_form" ref="formRef">
      <el-form-item label="时间筛选">
        <el-button plain :type="pageType == 0 ? 'primary' : ''" @click="changDateBtn(0)">昨天</el-button>
        <el-button plain :type="pageType == 1 ? 'primary' : ''" @click="changDateBtn(1)">最近7天</el-button>
        <el-button plain :type="pageType == 2 ? 'primary' : ''" @click="changDateBtn(2)">最近30天</el-button>
      </el-form-item>
      <el-form-item class="selectTime" style="width: 435px">
        <el-date-picker v-model="formData.create_at" type="datetimerange" popper-class="selectTime_date"
          prefix-icon="Calendar" :append-to-body="false" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" range-separator="—" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item class="right_btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getDay } from '@/utils/utils'
import type { ElForm } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>
const emit = defineEmits(['submit'])
const pageType = ref(1)
const formRef = ref<FormInstance>()
const formData = ref({
  create_at: [getDay(-6), getDay(0, true)] //创建时间
})
// 查询
const onSubmit = () => {
  emit('submit', formData.value)
}
const changDateBtn = (val: number) => {
  pageType.value = val
  switch (val) {
    case 0:
      formData.value.create_at = [getDay(-1), getDay(-1, true)]
      break
    case 1:
      formData.value.create_at = [getDay(-6), getDay(0, true)]
      break
    case 2:
      formData.value.create_at = [getDay(-29), getDay(0, true)]
      break
  }
  onSubmit()
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  pageType.value = 1
  formData.value.create_at = [getDay(-6), getDay(0, true)]
  onSubmit()
}
</script>

<style lang="scss" scoped>
.search_box {
  // display: flex;
  padding: 20px 26px 0;
  margin: 16px 0;
  background: #ffffff;
  // box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
  border: 1px solid #eaeaea;
  font-size: 14px;
  color: #33302d;

  .search_form {
    display: flex;

    .right_btn {
      flex: 1;
      min-width: 150px;
      text-align: right;
    }
  }
     :deep(.el-form-item__content) {
      line-height: normal;
     }

  .selectTime {
    :deep(.selectTime_date) {
      position: absolute !important;
      left: -27% !important;
      top: 40 !important;
    }

    :deep(.el-form-item__content) {
      display: flex;
      align-items: center;

      .text-center {
        min-width: 14px;
        margin: 0 13px;
        border-top: 1px solid #969696;
      }
    }
  }
}
</style>
